<template>
	<view class="slide-button" :style="{
		height
	}">
		<view class="inner-text" :style="{backgroundColor: bgColor}">
			<text class="title" :style="{color}">{{title}}</text>
		</view>
		<swiper class="swiper" :current="changeswiper" @change="handleSubmit">
			<swiper-item class="swiper-box">
				<view :style="{height}" class="swiper-item silde">
					<view v-if="changeswiper == 0" class="r-box"
						:style="{backgroundColor: bgColor,height,width: height}">
						<image class="arrowright" src="/static/images/order_button_arrow.png"></image>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view :style="{height}" class="swiper-item un-silde">
					<view v-if="changeswiper == 1" class="r-box-right"
						:style="{backgroundColor: bgColor,height,width: height}">
						<image class="arrow" src="/static/images/order_button_arrow.png">
						</image>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'slide-button',
		props: {
			height: {
				type: String,
				default: '128rpx'
			},
			title: {
				type: String,
				default: '已到达还车地点'
			},
			bgColor: {
				type: String,
				default: '#007DFE'
			},
			color: {
				type: String,
				default: '#ffffff'
			}
		},
		data() {
			return {
				changeswiper: 1
			}
		},
		methods: {
			handleSubmit(e) {
				const {
					current
				} = e.detail
				this.changeswiper = current
				if (current == 0) {
					this.$emit('submit')
				}
			},
			reset() {
				this.changeswiper = 1;
			}
		}
	}
</script>

<style>
	.slide-button {
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inner-text {
		flex: 1;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.inner-text .title {
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.arrow {
		
		height: 48rpx;
		width: 48rpx;
	}
	.r-box-right{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		align-items: center;
		justify-content: center;
	}

	.r-box {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 99;
		align-items: center;
		justify-content: center;
	}

	.arrowright {
		height: 48rpx;
		width: 48rpx;
	}

	.swiper {
		flex: 1;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {}

	.un-silde {

		position: relative;
	}

	.silde {
		background-color: rgba(0, 0, 0, 0.35);
	}
</style>